<template>
	<view class="content-body">
		<view class="tn-flex tn-flex-row-between">
			<view class="task-title">
				{{detailInfo.title}}
			</view>
			<view class="task-status-tag"><text class="renwustatus" >{{detailInfo.stateStr}}</text></view>
		</view>
		<view class="view1 tn-margin-bottom">
			<text class="viewfaburen">{{detailInfo.createdUser}}发布</text>
			<text class="viewbanji">{{detailInfo.className}}</text>
		</view>
		<view class="tn-margin-bottom-sm">
			<customCard>
				<block v-slot:header>
					<view class="tn-flex tn-flex-row-between title-box">
						<view class="view-title">任务时间</view>
						<view class="view-time">{{formatDateTime(new Date(detailInfo.startDate),'yyyy-MM-dd HH:mm')}}至{{formatDateTime(new Date(detailInfo.endDate),'yyyy-MM-dd HH:mm')}}</view>
					</view>
				</block>
				<block v-slot:body>
					<view style="padding-bottom: 26rpx;">
						<view class="tn-flex tn-flex-row-between tn-margin-bottom-sm">
							<view class="body-title">每日打卡截止时间</view>
							<view class="body-value">{{detailInfo.dailyClockInDeadline}}</view>
						</view>
						<view class="body-title tn-margin-bottom-sm">任务介绍</view>
						<view class="body-value">{{detailInfo.taskIntroduction}}</view>
					</view>
				</block>
			</customCard>
		</view>
		<view class="tn-margin-bottom-sm">
			<customCard>
				<block v-slot:header>
					<view class="tn-flex tn-flex-row-between title-box">
						<view class="view-title">我的任务完成情况</view>
						<view class="view-time">{{wanchengcishu}}/{{renwuList.length}}</view>
					</view>
				</block>
				<block v-slot:body>
					<view style="padding-bottom: 26rpx;">
						<view class="renwu-list-item" v-for="(item, index) in renwuList" :key="index" :class="item == true?'activeItem':''">
							<view class="active-item-view" v-if="item == true">
								<view class="active-item-text">
									{{index+1}}
								</view> 
								<view class="icon-success">
									<image src="../../static/finish.png" style="width: 38rpx;height:38rpx;"></image>
								</view>
							</view>
							<view class="" v-else>
								{{index+1}}
							</view>
						</view>
					</view>
				</block>
			</customCard>
		</view>
		<view class="tn-margin-bottom-sm">
			<customCard>
				<block v-slot:header>
					<view class="tn-flex tn-flex-row-between title-box">
						<view class="view-title">班级任务完成情况</view>
						<view class="view-time"></view>
					</view>
				</block>
				<block v-slot:body>
					<view style="padding-bottom: 26rpx;">
						<view class="wancheng-list-item  tn-padding-left-sm tn-padding-right-sm" v-for="(item, index) in wanchengList" :key="index">
							<customHeader :img="item.parentImgId" :name="item.createUserName" :time="item.content">
								<block v-slot:right>
									第{{item.clockInTimes}}次
								</block>
							</customHeader>
							<!-- <view class="avatar-item">
								<tn-avatar size="sm" v-if="item.parentImgId" :src="item.parentImgUrl"></tn-avatar>
								<tn-avatar size="sm" v-else src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar>
							</view> -->
							<view class="info-right">
								<!-- <view class="tn-margin-bottom-sm">
									<text>{{item.createUserName}}</text>
									<span class="tn-float-right">{{item.clockInTimes}}</span>
								</view>
								<view class="tn-margin-bottom-sm">
									{{item.content}}
								</view> -->
								<view class="tn-margin-bottom-sm blogger__item">
									<block v-if="item.images">
									  <view v-if="[1,2,4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
									    <image v-for="(image_item,image_index) in item.images" :key="image_index" @click="showImage(item,image_item)"
									      class="blogger__main-image"
									      :class="{
									        'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
									        'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
									      }"
									      :src="image_item.src"
									      mode="aspectFill"
									    ></image>
									  </view>
									  <view v-else class="tn-padding-top-xs">
									    <tn-grid  hoverClass="none" :col="3">
									      <block v-for="(image_item,image_index) in item.images" :key="image_index">
									        <!-- #ifndef MP-WEIXIN -->
									        <tn-grid-item style="width: 30%;margin: 10rpx;">
									          <image
									            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
									            :src="image_item.src"
									            mode="aspectFill"
									          ></image>
									        </tn-grid-item>
									        <!-- #endif-->
									        <!-- #ifdef MP-WEIXIN -->
									        <tn-grid-item style="width: 30%;margin: 10rpx;">
									          <image
									            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
									            :src="image_item.src"
									            mode="aspectFill"
									          ></image>
									        </tn-grid-item>
									        <!-- #endif-->
									      </block>
									    </tn-grid>
									  </view>
									</block>
								</view>
							</view>
						</view>
					</view>
				</block>
			</customCard>
		</view>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
	</view>
</template>

<script>
	import customCard from '../../components/customCard.vue'
	import {formatDateTime} from '../../util/common.js'
	import customHeader from '../../components/header.vue'
	export default {
		name: 'youerruyuan',
		components:{customCard,customHeader},
		data(){
			return {
				renwuStatus: 1,
				renwuList: [],
				wanchengList: [],
				previewImg: '',
				imageTitle: '',
				detailId: '',
				detailInfo: {},
				wanchengcishu: 0
			}
		},
		onLoad:function(options){
		    console.log(options.id);   // 2
			this.detailId = options.id
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getrenwuDetail()
		},
		methods: {
			...{formatDateTime},
			getrenwuDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/ParentChildTasks/TasksDetil',
					method: 'get',
					params: {
						id: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						this.wanchengList = [];
						this.renwuList = [];
						this.detailInfo = res.data.info
						res.data.recodeList.forEach(item => {
							if(item.images && item.images.length){
								item.images.forEach(_img => {
									_img['src'] = this.imageTitle + _img.filedId;
								})
							}
							if(item.parentImgId){
								item.parentImgUrl = this.imageTitle + item.parentImgId;
							}
							this.wanchengList.push(item)
						})
						for (let var1 in res.data.myTasks) {
							this.renwuList.push(res.data.myTasks[var1])
							if(res.data.myTasks[var1]){
								this.wanchengcishu++
							}
						}
						
					}
				})
			},
			showImage(item,image_item){
				
				this.previewImg = image_item.src;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-body{
		min-height: 100vh;
		background-color: #87D477;
		padding: 26rpx;
	}
	.title-box{
		padding: 26rpx 38rpx 0 38rpx;
		align-items: center;
	}
	.task-title{
		font-size: 40rpx;
		font-weight: bold;
		color:#fff;
	}
	.body-title{
		font-size: 28rpx;
		font-weight: 600;
	}
	.body-value{
		color: rgba(0,0,0,0.60);
		font-size: 28rpx;
	}
	.view-title{
		font-weight: 550;
		font-size: 36rpx;
	}
	.task-status-tag{
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		color: rgba(0,0,0,0.40);
		background: #e8e8e8;
		border-radius: 200rpx;
		padding:0 24rpx;
	}
	.view-time{
		font-size: 24rpx;
		color: rgba(0,0,0,0.40);
	}
	.view1{
		color: #fff;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.viewfaburen{
		margin-right: 10px;
	}
	.viewbanji{
		
	}
	.in-title{
		font-weight: 550;
		margin-bottom: 10rpx;
	}
	.view2{
		overflow: hidden;
		padding-bottom: 20rpx;
		border-bottom: 2px dotted #dddddd;
	}
	.view3{
		
			overflow: hidden;
			padding-bottom: 20rpx;
		border-bottom: 2px dotted #dddddd;
	}
	.renwu-list-item{
		width: 78rpx;
		height: 78rpx;
		background-color: #E8E8E8;
		text-align: center;
		line-height: 78rpx;
		border-radius: 39rpx;
		float: left;
		margin: 20rpx;
	}
	.activeItem{
		background-color: #79CF67;
		color:#fff;
		position: relative;
		.active-item-view{
			// .active-item-text{
			// 	height: 12rpx;
			// 	line-height: 12rpx;
			// 	position: absolute;
			// 	top: 15rpx;
			// 	left: 40%;
			// 	font-size: 25rpx;
			// }
			position: relative;
			.icon-success{
				display: flex;
				position: absolute;
				bottom: 0;
				right: -19rpx;
			}
		}
	}
	.wancheng-list-item{
		width: 100%;
	}
	.avatar-item{
		width: 60rpx;
		float: left;
	}
	.info-right{
		margin-left: 70rpx;
		width: calc(100% - 70rpx);
	}
	
		  .image-check-view{
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 2;
			  background-color: rgba(255, 255, 255, 1);
			  .tn-icon-close{
				  position: absolute;
				  top: 10px;
				  right: 10px;
				  font-size: 36rpx;
				  z-index: 888;
			  }
		  }
	
	/* 文章内容 start*/
  .blogger {
    &__item {
      padding: 30rpx;
    }
    
    &__author {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__desc {
      line-height: 55rpx;
      
      &__label {
        padding: 0 20rpx;
        margin: 0rpx 18rpx 0 0;
        
        &--prefix {
          color: #00FFC8;
          padding-right: 10rpx;
        }
      }
      &__content {
        
      }
    }
    
    &__content {
      margin-top: 18rpx;
      padding-right: 18rpx;
      
      &__data {
        line-height: 46rpx;
        text-align: justify;
        overflow: hidden;
        transition: all 0.25s ease-in-out;
      }
      
      &__status {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #82B2FF;
      }
    }
    
    &__main-image {
      border-radius: 16rpx;
      
      &--1 {
        max-width: 80%;
        max-height: 300rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
    
    &__ad {
      width: 100%;
      height: 500rpx;
      transform: translate3d(0px, 0px, 0px) !important;
      
      ::v-deep .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      
      &__item {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: translate3d(100%, 0px, 0px) scale(1) !important;
        transition: transform 0.25s ease-in-out;
        z-index: 1;
        
        &--0 {
          transform: translate3d(0%, 0px, 0px) scale(1) !important;
          z-index: 4;
        }
        &--1 {
          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
          z-index: 3;
        }
        &--2 {
          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
          z-index: 2;
        }
      }
      
      &__content {
        border-radius: 40rpx;
        width: 640rpx;
        height: 500rpx;
        overflow: hidden;
      }
      
      &__image {
        width: 100%;
        height: 100%;
      }
    }
  }
	.renwujieshao{
		height: 130rpx;
		width: calc(100% - 222rpx);
		box-sizing: border-box;
		float: left;
		display:inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	.color-title{
		font-weight: 550;
	}
</style>